<script lang="ts">
import { ref } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ComponentSize, ElMessage, ElMessageBox } from 'element-plus';
import { programmerService } from '@/api/programmer.js'
import { User, SwitchButton } from '@element-plus/icons-vue';

import { useTokenStore } from '@/stores/token';


const handleCommand = (command) => {
  if (command === 'logout') {
    //退出登录
    ElMessageBox.confirm(
      '你确认退出登录吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        try {
          // 清空pinia中的token和个人信息
          const tokenStore = useTokenStore();
          tokenStore.removeToken();

          // 跳转到登录页
          router.push('/login');

          // 更新 localStorage
          localStorage.setItem('isLoggedIn', 'false');
        } catch (error) {
          console.error("发生错误：", error);
          // 可以选择是否在这里显示错误消息或其他处理
        }
      })
      .catch(() => {
        // 用户点击了取消
        ElMessage({
          type: 'info',
          message: '取消退出',
        });
      });
  }
}

const activeIndex = ref('1')
const cards = ref([
  {
    id: 1,
    title: '广州伽佤电子商务有限公司MySQL开发工程师',
    rating: '⭐⭐⭐⭐⭐ (999)',
    experience: '10年',
    skills: ['PHP', 'MySQL', 'Vue', 'Python', 'Nginx'],
    works: '李撒林作品集合',
    location: '广州',
    certified: '',
    availableTime: '工作日 9:30-18:30, 周末 9:30-18:30',
    price: '99999元/月',
    role: '后端',
    classification: '全职'
  },
]);
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const router = useRouter();
function goToDetails() {
  router.push('/login');
}
const searchQuery = ref(''); // 假设使用 Vue 3 的响应式 API

const getProgrammer = async () => {
  let result = await programmerService();
  cards.value = result.data;
}
getProgrammer();

const search = function (query) {
  axios.get('http://localhost:8080/search', { params: { query } })
    .then(result => {
      searchQuery.value = result.data; // 将结果赋值给响应式变量
    })
    .catch(error => {
      console.log(error); // 修正错误变量名称
    });
}
const buttons = [
  { type: '', text: 'plain' },
] as const
export default {
  data() {
    const currentPage4 = ref(1)
    const pageSize4 = ref(5)
    const size = ref<ComponentSize>('default')

    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`)
    }
    return {
      activeIndex,
      isDark: false,
      currentPage4,
      pageSize4,
      size,
      User,
      SwitchButton,
      buttons,
      userAvatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      goToDetails,
      handleSizeChange,
      handleCurrentChange,
      handleCommand,
      isUnauthorized: false,
      handleSelect,
      logoSrc: 'src/assets/logo.jpg',
      searchQuery: '',
      activeColor: 'rgb(0, 106, 255)',
      sort: '智能排序',
      certified: '不限',
      roleOptions: ['全部', '产品经理', '设计师', '前端', '移动端', '小程序', '游戏', '后端', '区块链', 'AI'],
      locationOptions: ['全部', '北京', '上海', '深圳', '杭州', '广州', '成都', '南京', '武汉', '西安', '重庆'],
      cards: [
        {
          id: 1,
          title: '广州伽佤电子商务有限公司MySQL开发工程师',
          rating: '⭐⭐⭐⭐⭐ (999)',
          experience: '10年',
          skills: ['PHP', 'MySQL', 'Vue', 'Python', 'Nginx'],
          works: '李撒林作品集合',
          location: '广州',
          certified: '',
          availableTime: '工作日 9:30-18:30, 周末 9:30-18:30',
          price: '99999元/月',
          role: '后端',
          classification: '全职'
        },
      ]
    };
  },
  components: {
    User,
    SwitchButton,
  },
  methods: {
    setDefaultLogo(event) {
      event.target.src = 'images/default-logo.jpg';
    },
    search() {
      // 处理搜索逻辑
      console.log(`搜索内容: ${this.searchQuery}`);
    },
    filter(option) {
      // 处理过滤逻辑
      console.log(`过滤选项: ${option}`);
      if (option === '全部') {
        this.cards = this.cards;
      } else {
        this.cards = this.cards.filter(card => card.role === option);
        this.cards = this.cards.filter(card => card.location === option);
      }
    },
    navigateTologin(page) {
      this.$router.push(`/${page}`); // 跳转到登录页面
    },
    navigateToregister(page) {
      this.$router.push(`/${page}`); // 跳转到登录页面
    },
    navigateTo(link) {
      window.location.href = link;
    },
    viewProfile(id) {
      this.$router.push(`/programmer/detail/${id}`);
    }
  }
};
</script>

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"
    style="height:75px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
    <el-menu-item index="0">
      <img style="width: 100px;height: 70px;margin-left: 53px;margin-right: 10px;" src="@/assets/logo.jpg"
        alt="CodeCash" />
    </el-menu-item>
    <el-search-item index="1" style="transform: translate(-95%,15px);">
      <el-input v-model="searchQuery" style="width: 320px;height:40px;" placeholder="搜索您感兴趣的内容" clearable />
      <el-button type="search" style="height: 40px;background-color:#007bff;color:white;">搜索</el-button>
    </el-search-item>
    <el-router-menu index="2" style="transform: translateX(-2%);">
      <el-link href="/" style="color: black; font-size: 18px;padding: 20px;">首页</el-link>
      <el-link href="/programmer" style="color: black; font-size: 18px;padding: 20px;">程序员</el-link>
      <el-link href="/task" style="color: black; font-size: 18px;padding: 20px;">任务大厅</el-link>
      <el-link href="/community" style="color: black; font-size: 18px;padding: 20px;">社区</el-link>
      <el-link href="/user/call" style="color: black; font-size: 18px;padding: 20px;">联系我们</el-link>
    </el-router-menu>
    <el-buttons-item index="3" style="transform: translateY(25%);margin-right: 20px;">
      <el-dropdown placement="bottom-end">
        <el-avatar :src="userAvatar" size="medium" />
        <el-icon>
          <CaretBottom />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="userInfo" :icon="User" @click="navigateTo('/userInfo')">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout" :icon="SwitchButton" @click="handleCommand('logout')">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-buttons-item>
  </el-menu>
  <el-main>
    <div class="filter-container">
      <div class="filter-group" id="role-filter">
        <h3>角色</h3>
        <button data-role="全部" class="filter-btn active" @click="filter('全部')">全部</button>
        <button data-role="产品经理" class="filter-btn" @click="filter('产品经理')">产品经理</button>
        <button data-role="设计师" class="filter-btn" @click="filter('设计师')">设计师</button>
        <button data-role="前端" class="filter-btn" @click="filter('前端')">前端</button>
        <button data-role="移动端" class="filter-btn" @click="filter('移动端')">移动端</button>
        <button data-role="小程序" class="filter-btn" @click="filter('小程序')">小程序</button>
        <button data-role="游戏" class="filter-btn" @click="filter('游戏')">游戏</button>
        <button data-role="后端" class="filter-btn" @click="filter('后端')">后端</button>
        <button data-role="区块链" class="filter-btn" @click="filter('区块链')">区块链</button>
        <button data-role="AI" class="filter-btn" @click="filter('AI')">AI</button>
      </div>
      <div class="filter-group" id="location-filter">
        <h3>地点</h3>
        <button data-location="全部" class="filter-btn active" @click="filter('全部')">全部</button>
        <button data-location="北京" class="filter-btn" @click="filter('北京')">北京</button>
        <button data-location="上海" class="filter-btn" @click="filter('上海')">上海</button>
        <button data-location="深圳" class="filter-btn" @click="filter('深圳')">深圳</button>
        <button data-location="杭州" class="filter-btn" @click="filter('杭州')">杭州</button>
        <button data-location="广州" class="filter-btn" @click="filter('广州')">广州</button>
        <button data-location="成都" class="filter-btn" @click="filter('成都')">成都</button>
        <button data-location="南京" class="filter-btn" @click="filter('南京')">南京</button>
        <button data-location="武汉" class="filter-btn" @click="filter('武汉')">武汉</button>
        <button data-location="西安" class="filter-btn" @click="filter('西安')">西安</button>
        <button data-location="重庆" class="filter-btn" @click="filter('重庆')">重庆</button>
      </div>
      <div class="filter-group" id="classification-filter"></div>
      <div class="filter-group">
        <h3>其他</h3>
        <h3>排序</h3>
        <select v-model="sort" @change="filter">
          <option>智能排序</option>
          <option>评价最多</option>
          <option>最新签约</option>
          <option>价格最低</option>
        </select>
        <h3>认证开发者</h3>
        <select v-model="certified" @change="filter">
          <option>不限</option>
          <option>项目经理</option>
          <option>自由工作者</option>
          <option>协作开发者</option>
          <option>资深工程师</option>
          <option>资深程序员</option>
          <option>资深架构师</option>
          <option>资深测试工程师</option>
          <option>资深测试人员</option>
        </select>
        <button @click="filter('专家')">专家</button>
        <button @click="filter('全职')">全职</button>
        <button @click="filter('兼职')">兼职</button>
      </div>
    </div>

    <div class="breadcrumb">
      <span class="breadcrumb-item"></span>
    </div>

    <div v-for="card in cards" :key="card.id" class="card">
      <div class="profile">
        <div class="avatar">
          <img src="../assets/tx_5.jpg" alt="Avatar" />
          <a href="#" class="button">已签约</a>
          <div class="text">刚刚活跃</div>
        </div>
        <div class="info" :data-role="card.role" :data-location="card.location" :data-certified="card.certified"
          :data-classification="card.classification">
          <h2>{{ card.title }}</h2>
          <div class="rating">{{ card.rating }} <span class="badge">{{ card.experience }}</span></div>
          <div class="details">
            <div class="text">技能：{{ card.skills.join(', ') }}</div>
            <div class="text">作品：{{ card.works }}</div><br>
            <span>工作地点：{{ card.location }}</span>
            <span>可预约时间：{{ card.availableTime }}</span>
          </div>
        </div>
      </div>
      <div class="price-container">
        <div class="price-line"></div>
        <div class="price">
          <span>{{ card.price }}</span>
          <br>
          <button @click="viewProfile(card.id)">查看主页</button>
        </div>
      </div>
    </div>
    <el-pagination style="margin-left: 500px;color: #2994F2;justify-content: center;align-items: center;margin: 40px auto;" v-model:current-page="currentPage4"
      v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]" :size="size"
      layout="total, sizes, prev, pager, next, jumper" :total="30" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </el-main>

  <el-footer>
    <div class="footer">
      <div>
        <a href="#">动态公告</a> |
        <a href="#">帮助</a> |
        <a href="#">关于我们</a> |
        <a href="#">合作伙伴</a> |
        <a href="#">意见反馈</a> |
        <span style="color: rgb(78, 77, 77);">@“码上有钱”程序员接单平台</span>
      </div>
      <div class="credits">
        粤ICP备20220901号-4 | 粤公网安备33011002011599号
      </div>
    </div>
  </el-footer>
</template>



<style scoped>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}

.filter-container {
  margin-left: 160px;
  max-width: 1200px;
  height: 190px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.filter-group {
  display: flex;
  margin-right: 120px;
  margin-left: 120px;
}

.filter-group h3 {
  display: inline-block;
  font-size: 16px;
  margin-right: 30px;
  padding: 5px 5px;
  font-weight: normal;
  color: #007bff;
}

.filter-group button {
  width: auto;
  height: 35px;
  font-size: 14px;
  background-color: #F8F8F9;
  border: none;
  margin-top: 15px;
  padding: 5px 10px;
  margin-right: 30px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  color: #000000;
}

.filter-group button.active {
  background-color: #DCEFFF;
  /* 按钮背景颜色 */
  color: #2994F2;
  /* 按钮字体颜色 */
}

.filter-btn {
  cursor: pointer;
}

.filter-group select {
  width: 86px;
  height: 30px;
  background-color: #fff;
  border: none;
  padding: 5px 10px;
  margin-top: 15px;
  margin-right: 30px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  color: #5e5c5c;
  padding: 4px;
  border: 1px solid #ccc;
}

.filter-group button:hover,
.filter-group select:hover,
.filter-group button1:hover {
  background-color: #cce1ff;
}


.filter-group s {
  padding: 4px;
  border: 1px solid #ccc;
}

.filter-group button1 {
  width: 30px;
  height: 20px;
  font-size: 14px;
  background-color: #fff;
  border: solid 1px #ccc;
  margin-top: 15px;
  padding: 5px 10px;
  margin-right: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  color: #5e5c5c;
}

.breadcrumb {
  font-size: 16px;
  color: #999;
  margin-left: 175px;
  padding-top: 20px;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #666;
}

.breadcrumb-item a:hover {
  color: #333;
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 5px;
  color: #999;
}

.card {
  max-width: 1200px;
  height: 180px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  margin-left: 160px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
}

.profile {
  display: flex;
  align-items: center;
}

.price-container {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
}

.price-line {
  width: 2px;
  /* 线宽 */
  background-color: #D8D8D8;
  /* 线颜色 */
  height: 130px;
  /* 高度 */
  margin-right: 10px;
  /* 线与内容之间的距离 */
}

.avatar {
  width: 80px;
  height: 80px;
  background-color: #ddd;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: -70px;
  flex-direction: column;
  /* 垂直排列子元素 */
  align-items: center;
}

.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.button {
  display: inline-block;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid #4A90E2;
  padding: 5px;
  border-radius: 5px;
  color: #4A90E2;
  text-decoration: none;
}

.text {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 14px;
}

.info {
  color: #333;
}

.info h2 {
  margin: 0;
  font-size: 20px;
}

.rating {
  color: #ffcc00;
  font-size: 16px;
  margin-top: 10px;
}

.details {
  color: #666;
  margin-top: 10px;
}

.details br {
  margin-top: 10px;
  margin-bottom: 10px;
}

.badge {
  background-color: #ccc;
  border-radius: 5px;
  padding: 2px 5px;
  margin-left: 10px;
  font-size: 12px;
  color: #000;
}

.price {
  font-size: 24px;
  color: #333;
  margin: 0 20px;
  text-align: center;
  margin-bottom: 20px;
}

.price span {
  margin-bottom: 10px;
}

.price button {
  display: block;
  background-color: #2994F2;
  margin-left: 10px;
  margin-top: 30px;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.price button:hover {
  background-color: #0056b3;
}

.last_card {
  max-width: 1200px;
  height: 180px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  margin-left: 160px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer {
  margin-top: 220px;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  text-align: center;
  background-color: #fff;
  width: 100%;
  left: 0;
}

/* 页脚链接样式 */
.footer a {
  text-decoration: none;
  color: rgb(78, 77, 77);
  margin: 0 10px;
  /* 链接之间的间距 */
}

/* 页脚版权信息样式 */
.footer .credits {
  margin-top: 5px;
  font-size: 12px;
  color: gray;
}
</style>